<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡组件和提示框</title>
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js" ></script>
<style type="text/css">
body { margin:30px;
padding:30px;}
</style>
</head>

<body>
<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
	<li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
	<li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
	<div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
	<div class="tab-pane fade" id="rule">规则内容面板</div>
	<div class="tab-pane fade" id="forum">论坛内容面板</div>
	<div class="tab-pane fade" id="security">安全内容面板</div>
	<div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>
<br />
<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab2" class="nav nav-pills" role="tablist">
    <li class="active"><a href="#yule" role="tab" data-toggle="pill">娱乐</a></li>
    <li><a href="#fangchang" role="tab" data-toggle="pill">房产</a></li>
    <li><a href="#guonei" role="tab" data-toggle="pill">国内</a></li>
    <li><a href="#guowai" role="tab" data-toggle="pill">国外</a></li>	
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent2" class="tab-content">
	<div class="tab-pane fade in active" id="yule">娱乐内容面板</div>
	<div class="tab-pane fade" id="fangchang">房产内容面板</div>
	<div class="tab-pane fade" id="guonei">国内内容面板</div>
	<div class="tab-pane fade" id="guowai">国外内容面板</div>	
</div>
<br/>
<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab3" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#yule1" role="tab">娱乐</a></li>
    <li><a href="#fangchang1" role="tab">房产</a></li>
    <li><a href="#guonei1" role="tab">国内</a></li>
    <li><a href="#guowai1" role="tab">国外</a></li>    
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent2" class="tab-content">
	<div class="tab-pane fade in active" id="yule1">娱乐内容面板</div>
	<div class="tab-pane fade" id="fangchang1">房产内容面板</div>
	<div class="tab-pane fade" id="guonei1">国内内容面板</div>
	<div class="tab-pane fade" id="guowai1">国外内容面板</div>	
</div>
<br/>

<h3>按钮做的提示框</h3>
  <button type="button" 
          class="btn btn-default" 
          data-toggle="tooltip" 
          data-placement="left" 
          title="提示框居左">
  提示框居左      
  </button>
  <button type="button" 
          class="btn btn-default" 
          data-toggle="tooltip" 
          data-placement="top" 
          data-original-title="提示框在顶部">
   提示框在顶部
  </button>
  <button type="button" 
          class="btn btn-default" 
          data-toggle="tooltip" 
          data-placement="bottom" 
          data-original-title="提示框在底部">
  提示框在底部             
  </button>
  <button type="button" 
          class="btn btn-default" 
          data-toggle="tooltip" 
          data-placement="right" 
          data-animation="true"
          data-original-title="提示框居右">
  提示框居右      
  </button>
  <h3>链接制作的提示框</h3>
  <a class="btn btn-primary" 
     data-toggle="tooltip" 
     data-placement="left" 
     data-original-title="提示框居左面"
     >
     提示框居左
  </a>
  <a class="btn btn-primary" 
     data-toggle="tooltip" 
     data-placement="top" 
     title="提示框在顶部">
     提示框在顶部
  </a>
  <a class="btn btn-primary" 
     data-toggle="tooltip" 
     data-placement="bottom" 
     title="提示框在底部">
     提示框在底部
  </a>
  <a class="btn btn-primary" 
     data-toggle="tooltip" 
     data-placement="right" 
     title="提示框在居右">
     提示框居右
  </a>
  <a href="##" 
     class="btn btn-primary" 
     id="myTooltip">
     我是提示框
  </a>
  <a href="##" 
     class="btn btn-primary" 
     id="myTooltip2">
     我是提示框2
  </a>
  
  <h4>data-animation="true"</h4>
  <button type="button" 
  class="btn btn-default" 
  data-toggle="tooltip" 
  data-placement="left" 
  data-original-title="data-animation='true'"
  data-animation="true">data-animation="true"</button>
  
  <h4>data-html="true"</h4>
  <button type="button" 
  class="btn btn-default" 
  data-toggle="tooltip" 
  data-placement="top" 
  data-original-title="<h1>data-html='true'</h1>"
  data-html="true">data-html="true"</button>
  
  <h4>data-trigger="click"</h4>
  <button type="button" 
  class="btn btn-default" 
  data-toggle="tooltip" 
  data-placement="bottom" 
  data-original-title="data-trigger='click'"
  data-trigger="click">data-trigger="click"</button>
  
  <h4>data-delay="500"</h4>
  <button type="button" 
  class="btn btn-default" 
  data-toggle="tooltip" 
  data-placement="bottom" 
  data-original-title="data-delay='500'"
  data-delay="500">data-delay="500"</button>
  
  <h4>弹出框</h4>
  <button type="button" class="btn btn-default" id="myPopover">猛击我吧</button>
  <button type="button" class="btn btn-default" data-toggle="popover" data-original-title="标题" data-content="内容" data-placement="right">猛击我吧</button>
</body>
<script>
$(function(){
	$("#myTab3 a").click(function(e){
		e.preventDefault();
		$(this).tab("show")
	})
	<!--提示框-->
	$('[data-toggle="tooltip"]').tooltip();
    $('#myTooltip').tooltip({
      title:"我是一个提示框，我在顶部出现",
      placement:'top'
    });
	 $('#myTooltip2').tooltip({
      title:"我是一个提示框，我在底部出现",
      placement:'bottom'
    });
	<!-- 弹出框 -->
	$('[data-toggle="popover"').popover();
	$('#myPopover').popover({
     title:"我是弹出框的标题",
     content:"我是弹出框的内容",
     placement:"right"
  });
})
</script>
</html>
